<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Java Web程序设计 - 怪兽挑战</title>
    <link href="https://cdn.tailwindcss.com" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600&family=Press+Start+2P&display=swap" rel="stylesheet">
  
    <style>
        /* 基础样式 */
        body {
            background-color: #F5F0E6;
            background-image: 
                url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23D4B996' fill-opacity='0.12' fill-rule='evenodd'/%3E%3C/svg%3E");
            font-family: 'Noto Sans SC', sans-serif;
            overflow-x: hidden;
        }
        
        /* 顶部导航 */
        .page-header {
            background-color: rgba(232, 220, 202, 0.5);
            border-bottom: 2px solid #D4B996;
            padding: 0.8rem 0;
            margin-bottom: 1rem;
        }
        
        .header-content {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 0.8rem;
        }
        
        .game-title {
            font-family: 'Press Start 2P', cursive;
            color: #8B5A2B;
            font-size: 1.1rem;
        }
        
        .player-status {
            display: flex;
            align-items: center;
            gap: 1rem;
            background-color: rgba(255,255,255,0.7);
            padding: 0.5rem 1rem;
            border-radius: 30px;
            border: 2px solid #D4B996;
        }
        
        .player-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: #E94560;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid #FFF;
        }
        
        .player-info {
            display: flex;
            flex-direction: column;
            gap: 0.2rem;
        }
        
        .player-name, .player-level, .stat-item {
            font-size: 0.8rem;
            color: #8B5A2B;
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            color: #5D4037;
        }
        
        /* 经验条 */
        .exp-bar {
            width: 110px;
            height: 8px;
            background-color: #F5F0E6;
            border: 2px solid #D4B996;
            border-radius: 4px;
            overflow: hidden;
        }
        
        .exp-fill {
            height: 100%;
            background-color: #4CAF50;
            width: 10%;
            transition: width 0.5s ease;
        }
        
        .exp-text {
            font-size: 0.6rem;
            color: #5D4037;
            text-align: center;
            margin-top: 0.2rem;
        }
        
        /* 冒险指南 */
        .guide-card {
            max-width: 1200px;
            margin: 0 auto 1.2rem;
            background-color: white;
            border-radius: 12px;
            border: 2px solid #D4B996;
            padding: 1rem;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        }
        
        .guide-header {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.6rem;
            border-bottom: 2px dashed #D4B996;
            padding-bottom: 0.5rem;
        }
        
        .guide-icon {
            width: 32px;
            height: 32px;
            background-color: #FFD600;
            color: #8B5A2B;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
        }
        
        .guide-title {
            font-size: 1rem;
            color: #8B5A2B;
            font-weight: 600;
        }
        
        .guide-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
            margin: 0;
            padding: 0 0.2rem;
        }
        
        .guide-item {
            display: flex;
            align-items: flex-start;
            gap: 0.5rem;
            font-size: 0.9rem;
            line-height: 1.4;
            color: #5D4037;
        }
        
        .guide-item i {
            color: #2E7D32;
            margin-top: 0.1rem;
            font-size: 0.9rem;
        }
        
        /* 关卡容器 */
        .levels-container {
            max-width: 1400px;
            margin: 0 auto 2.5rem;
            padding: 0 1rem;
        }
        
        .levels-header {
            text-align: center;
            margin-bottom: 1.2rem;
        }
        
        .levels-title {
            font-family: 'Press Start 2P', cursive;
            color: #8B5A2B;
            font-size: 1.6rem;
            margin-bottom: 0.5rem;
        }
        
        .levels-subtitle {
            font-size: 0.9rem;
            color: #5D4037;
            max-width: 800px;
            margin: 0 auto;
            line-height: 1.5;
        }
        
        /* 滚动指示器 */
        .scroll-indicator {
            display: flex;
            justify-content: center;
            gap: 0.6rem;
            margin-bottom: 1rem;
        }
        
        .scroll-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #D4B996;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .scroll-dot.active {
            background-color: #8B5A2B;
            transform: scale(1.2);
        }
        
        /* 关卡滚动容器 */
        .cards-scroll {
            display: flex;
            gap: 1.5rem;
            overflow-x: auto;
            padding: 0.8rem 0 1.5rem;
            scrollbar-width: thin;
            scrollbar-color: #D4B996 #F5F0E6;
            scroll-behavior: smooth;
        }
        
        .cards-scroll::-webkit-scrollbar {
            height: 8px;
        }
        
        .cards-scroll::-webkit-scrollbar-track {
            background: #F5F0E6;
            border-radius: 4px;
            border: 1px solid #D4B996;
        }
        
        .cards-scroll::-webkit-scrollbar-thumb {
            background: #D4B996;
            border-radius: 4px;
            border: 1px solid #F5F0E6;
        }
        
        .cards-scroll::-webkit-scrollbar-thumb:hover {
            background: #8B5A2B;
        }
        
        /* 关卡卡片基础样式 */
        .level-card {
            flex: 0 0 300px;
            height: 520px;
            border-radius: 16px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 8px 20px rgba(0,0,0,0.12);
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            border: 3px solid;
            opacity: 0;
            transform: translateY(30px) scale(0.95);
            animation: cardFadeIn 0.6s ease-out forwards;
        }
        
        /* 卡片初始动画 */
        .level-card:nth-child(1) { animation-delay: 0.1s; }
        .level-card:nth-child(2) { animation-delay: 0.2s; }
        .level-card:nth-child(3) { animation-delay: 0.3s; }
        .level-card:nth-child(4) { animation-delay: 0.4s; }
        .level-card:nth-child(5) { animation-delay: 0.5s; }
        .level-card:nth-child(6) { animation-delay: 0.6s; }
        .level-card:nth-child(7) { animation-delay: 0.7s; }
        .level-card:nth-child(8) { animation-delay: 0.8s; }
        .level-card:nth-child(n+9) { animation-delay: 0.9s; }
        
        @keyframes cardFadeIn {
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }
        
        /* 卡片悬停效果 */
        .level-card:hover {
            transform: translateY(-10px) scale(1.03);
            box-shadow: 0 15px 30px rgba(0,0,0,0.15);
            z-index: 10;
        }
        
        /* 关卡配色方案 */
        .level-0 { border-color: #007E33; background: linear-gradient(145deg, #00C853 0%, #007E33 100%); }
        .level-1 { border-color: #1976D2; background: linear-gradient(145deg, #2196F3 0%, #1976D2 100%); }
        .level-2 { border-color: #1565C0; background: linear-gradient(145deg, #1E88E5 0%, #1565C0 100%); }
        .level-3 { border-color: #0D47A1; background: linear-gradient(145deg, #1565C0 0%, #0D47A1 100%); }
        .level-4 { border-color: #F57C00; background: linear-gradient(145deg, #FF9800 0%, #F57C00 100%); }
        .level-5 { border-color: #E65100; background: linear-gradient(145deg, #FFA726 0%, #E65100 100%); }
        .level-6 { border-color: #7B1FA2; background: linear-gradient(145deg, #9C27B0 0%, #7B1FA2 100%); }
        .level-7 { border-color: #6A1B9A; background: linear-gradient(145deg, #8E24AA 0%, #6A1B9A 100%); }
        .level-8 { border-color: #4A148C; background: linear-gradient(145deg, #673AB7 0%, #4A148C 100%); }
        .level-9 { border-color: #3A0CA3; background: linear-gradient(145deg, #5B21B6 0%, #3A0CA3 100%); }
        .level-10 { border-color: #D32F2F; background: linear-gradient(145deg, #F44336 0%, #D32F2F 100%); }
        .level-11 { border-color: #C62828; background: linear-gradient(145deg, #E53935 0%, #C62828 100%); }
        .level-12 { border-color: #B71C1C; background: linear-gradient(145deg, #D32F2F 0%, #B71C1C 100%); }
        .level-13 { border-color: #9F0000; background: linear-gradient(145deg, #C62828 0%, #9F0000 100%); }
        .level-14 { border-color: #820000; background: linear-gradient(145deg, #B71C1C 0%, #820000 100%); }
        .level-15 { border-color: #C2185B; background: linear-gradient(145deg, #E91E63 0%, #C2185B 100%); }
        .level-16 { border-color: #AD1457; background: linear-gradient(145deg, #D81B60 0%, #AD1457 100%); }
        .level-17 { border-color: #880E4F; background: linear-gradient(145deg, #C2185B 0%, #880E4F 100%); }
        .level-18 { border-color: #7B1FA2; background: linear-gradient(145deg, #9C27B0 0%, #7B1FA2 100%); }
        .level-19 { border-color: #6A1B9A; background: linear-gradient(145deg, #8E24AA 0%, #6A1B9A 100%); }
        .level-20 { border-color: #FF6F00; background: linear-gradient(145deg, #FF9800 0%, #FF6F00 100%); }
        .level-21 { border-color: #F57C00; background: linear-gradient(145deg, #FFA726 0%, #F57C00 100%); }
        .level-22 { border-color: #E65100; background: linear-gradient(145deg, #FFB74D 0%, #E65100 100%); }
        .level-23 { border-color: #D84315; background: linear-gradient(145deg, #FF8A65 0%, #D84315 100%); }
        .level-24 { border-color: #00838F; background: linear-gradient(145deg, #00BCD4 0%, #00838F 100%); }
        .level-25 { border-color: #006064; background: linear-gradient(145deg, #00ACC1 0%, #006064 100%); }
        .level-26 { border-color: #1B5E20; background: linear-gradient(145deg, #4CAF50 0%, #1B5E20 100%); }
        .level-27 { border-color: #2E7D32; background: linear-gradient(145deg, #66BB6A 0%, #2E7D32 100%); }
        .level-28 { border-color: #388E3C; background: linear-gradient(145deg, #81C784 0%, #388E3C 100%); }
        .level-29 { border-color: #263238; background: linear-gradient(145deg, #607D8B 0%, #263238 100%); }
        
        /* 粒子特效系统 */
        .particle-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }
        
        .particle {
            position: absolute;
            border-radius: 50%;
            opacity: 0;
        }
        
        /* 技能光环效果 */
        .skill-aura {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            border: 2px solid rgba(255,255,255,0.5);
            opacity: 0;
            z-index: 1;
        }
        
        /* 爆炸效果容器 */
        .explosion-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 100;
        }
        
        .explosion-particle {
            position: absolute;
            background-color: rgba(255,255,255,0.8);
            border-radius: 50%;
            opacity: 0;
        }
        
        /* 卡片内部元素 */
        .card-inner {
            padding: 1.5rem 1.2rem;
            color: white;
            flex: 1;
            display: flex;
            flex-direction: column;
            position: relative;
            z-index: 2;
        }
        
        .monster-level {
            position: absolute;
            top: 0.8rem;
            right: 0.8rem;
            background-color: rgba(0,0,0,0.2);
            padding: 0.2rem 0.6rem;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
            z-index: 2;
        }
        
        /* 怪兽头像容器 */
        .monster-avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: rgba(255,255,255,0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.2rem;
            border: 4px solid rgba(255,255,255,0.5);
            box-shadow: 0 0 15px rgba(0,0,0,0.1);
            position: relative;
            transition: all 0.3s ease;
        }
        
        /* 怪兽头像悬停效果 */
        .level-card:hover .monster-avatar {
            transform: scale(1.1);
            box-shadow: 0 0 20px rgba(255,255,255,0.3);
        }
        
        /* 怪兽头像图标样式 */
        .monster-avatar i {
            font-size: 2.8rem;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
            transition: all 0.5s ease;
        }
        
        /* 每个怪兽的专属头像动画 */
        .avatar-guide i { animation: bookFlip 2s ease infinite alternate; }
        .avatar-tag i { animation: tagSpin 3s linear infinite; }
        .avatar-grid i { animation: gridPulse 1.5s ease infinite alternate; }
        .avatar-form i { animation: formBounce 1s ease infinite alternate; }
        .avatar-css i { animation: cssColor 3s linear infinite; }
        .avatar-layout i { animation: brushSwing 1s ease infinite alternate; }
        .avatar-script i { animation: codeJump 0.5s ease infinite alternate; }
        .avatar-function i { animation: cogSpin 3s linear infinite; }
        .avatar-event i { animation: eventFloat 3s ease-in-out infinite; }
        .avatar-jquery i { animation: jquerySpin 2s linear infinite; }
        .avatar-jsp i { animation: fileBlink 1s ease infinite alternate; }
        .avatar-exchange i { animation: exchangeSpin 2s linear infinite; }
        .avatar-session i { animation: sessionFade 2s ease infinite alternate; }
        .avatar-servlet i { animation: serverPulse 1.5s ease infinite alternate; }
        .avatar-filter i { animation: filterSlide 1s ease infinite alternate; }
        .avatar-springmvc i { animation: cubeSpin 3s linear infinite; }
        .avatar-mapping i { animation: mapJump 1s ease infinite alternate; }
        .avatar-param1 i { animation: plugPulse 2s ease infinite; }
        .avatar-param2 i { animation: plugRotate 3s linear infinite; }
        .avatar-interceptor i { animation: shieldScan 2s ease infinite; }
        .avatar-db-query i { animation: dbFlow 2s ease infinite alternate; }
        .avatar-db-update i { animation: pencilWrite 1s ease infinite alternate; }
        .avatar-db-insert i { animation: plusGrow 1.5s ease infinite alternate; }
        .avatar-db-delete i { animation: trashShake 0.5s ease infinite; }
        .avatar-mybatis-query i { animation: searchScan 2s ease infinite; }
        .avatar-mybatis-sql i { animation: forkSpin 3s linear infinite; }
        .avatar-spring-ioc i { animation: cubeBounce 1s ease infinite alternate; }
        .avatar-spring-aop i { animation: randomSpin 2s linear infinite; }
        .avatar-spring-tx i { animation: transactionSpin 2.5s linear infinite; }
        .avatar-ssm i { animation: integratePulse 2s ease infinite alternate; }
        
        /* 头像动画关键帧 */
        @keyframes bookFlip { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(30deg); } }
        @keyframes tagSpin { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.1); } 100% { transform: rotate(360deg) scale(1); } }
        @keyframes gridPulse { 0% { opacity: 0.8; transform: scale(1); } 100% { opacity: 1; transform: scale(1.2); } }
        @keyframes formBounce { 0% { transform: translateY(0); } 100% { transform: translateY(-8px); } }
        @keyframes cssColor { 0% { color: #FF9800; } 50% { color: #FFF; } 100% { color: #FF9800; } }
        @keyframes brushSwing { 0% { transform: rotate(-15deg); } 100% { transform: rotate(15deg); } }
        @keyframes codeJump { 0% { transform: translateY(0); } 100% { transform: translateY(-10px); } }
        @keyframes cogSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        @keyframes eventFloat { 0%,100% { transform: translate(0, 0); } 25% { transform: translate(5px, -5px); } 50% { transform: translate(0, 5px); } 75% { transform: translate(-5px, -5px); } }
        @keyframes jquerySpin { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.1); } 100% { transform: rotate(360deg) scale(1); } }
        @keyframes fileBlink { 0% { opacity: 0.7; } 100% { opacity: 1; } }
        @keyframes exchangeSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        @keyframes sessionFade { 0% { opacity: 0.6; } 100% { opacity: 1; } }
        @keyframes serverPulse { 0% { transform: scale(1); } 100% { transform: scale(1.1); } }
        @keyframes filterSlide { 0% { transform: translateX(-5px); } 100% { transform: translateX(5px); } }
        @keyframes cubeSpin { 0% { transform: rotateX(0deg) rotateY(0deg); } 100% { transform: rotateX(360deg) rotateY(360deg); } }
        @keyframes mapJump { 0% { transform: translateY(0); } 100% { transform: translateY(-8px); } }
        @keyframes plugPulse { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } }
        @keyframes plugRotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        @keyframes shieldScan { 0% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.1) rotate(10deg); } 100% { transform: scale(1) rotate(0deg); } }
        @keyframes dbFlow { 0% { transform: rotate(0deg); } 100% { transform: rotate(90deg); } }
        @keyframes pencilWrite { 0% { transform: translateX(0) rotate(0deg); } 100% { transform: translateX(5px) rotate(10deg); } }
        @keyframes plusGrow { 0% { transform: scale(1); } 100% { transform: scale(1.2); } }
        @keyframes trashShake { 0% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } 100% { transform: rotate(-5deg); } }
        @keyframes searchScan { 0% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.1) rotate(10deg); } 100% { transform: scale(1) rotate(0deg); } }
        @keyframes forkSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        @keyframes cubeBounce { 0% { transform: translateY(0); } 100% { transform: translateY(-10px); } }
        @keyframes randomSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        @keyframes transactionSpin { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.1); } 100% { transform: rotate(360deg) scale(1); } }
        @keyframes integratePulse { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.1); opacity: 1; } }
        
        /* 怪兽名称样式 */
        .monster-name {
            font-family: 'Press Start 2P', cursive;
            font-size: 1rem;
            text-align: center;
            margin-bottom: 1rem;
            line-height: 1.4;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
            border-bottom: 2px dashed rgba(255,255,255,0.2);
            padding-bottom: 0.6rem;
            height: 55px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* 怪兽描述 */
        .monster-description {
            font-size: 0.85rem;
            text-align: center;
            padding: 0.8rem;
            background-color: rgba(0,0,0,0.1);
            border-radius: 8px;
            margin-bottom: 1.2rem;
            flex-grow: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* 弱点提示 */
        .weakness-hint {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            background-color: rgba(255,255,255,0.15);
            padding: 0.6rem;
            border-radius: 6px;
            font-size: 0.85rem;
            margin-bottom: 1.2rem;
            border: 1px solid rgba(255,255,255,0.3);
            animation: weaknessBlink 2s infinite alternate;
        }
        
        @keyframes weaknessBlink {
            from { opacity: 0.8; box-shadow: 0 0 5px rgba(255,255,255,0.2); }
            to { opacity: 1; box-shadow: 0 0 10px rgba(255,214,0,0.5); }
        }
        
        .weakness-hint i { color: #FFD600; }
        
        /* 挑战按钮 */
        .card-button {
            background-color: rgba(255,255,255,0.3);
            border: 2px solid rgba(255,255,255,0.5);
            color: white;
            border-radius: 30px;
            padding: 0.8rem 1rem;
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            width: 100%;
            margin-top: auto;
            margin-bottom: 0.3rem;
            box-shadow: 0 4px 0 rgba(0,0,0,0.15);
            position: relative;
            z-index: 2;
        }
        
        .card-button:hover {
            background-color: rgba(255,255,255,0.4);
            transform: translateY(-2px);
            box-shadow: 0 6px 0 rgba(0,0,0,0.2);
        }
        
        .card-button:active {
            transform: translateY(0);
            box-shadow: 0 2px 0 rgba(0,0,0,0.2);
        }
        
        /* 滚动提示 */
        .scroll-hint {
            text-align: center;
            margin-top: 0.8rem;
            color: #A69A86;
            font-size: 0.85rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
            animation: hintSwing 2s infinite alternate;
        }
        
        @keyframes hintSwing { from { transform: translateX(0); } to { transform: translateX(10px); } }
        
        /* 已通关标识 */
        .completed-badge {
            position: absolute;
            top: -10px;
            left: -10px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #FFD600;
            color: #8B5A2B;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            border: 3px solid white;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            transform: scale(0);
            transition: transform 0.3s ease;
            z-index: 15;
        }
        
        .level-card.completed .completed-badge {
            transform: scale(1);
            animation: badgePulse 2s infinite alternate;
        }
        
        @keyframes badgePulse { from { transform: scale(1); } to { transform: scale(1.1); } }
        
        /* 响应式适配 */
        @media (max-width: 768px) {
            .level-card { flex: 0 0 270px; height: 510px; }
            .header-content { flex-direction: column; align-items: flex-start; }
            .player-status { width: 100%; justify-content: space-between; }
            .monster-avatar { width: 90px; height: 90px; }
            .monster-avatar i { font-size: 2.5rem; }
        }
        
        @media (max-width: 480px) {
            .level-card { flex: 0 0 240px; height: 500px; }
            .monster-avatar { width: 80px; height: 80px; }
            .monster-avatar i { font-size: 2.2rem; }
        }
    </style>
</head>
<body>
    <header class="page-header">
        <div class="header-content">
            <div class="game-title">
                <i class="fa fa-code"></i> Java Web程序设计
            </div>
            <div class="player-status">
                <div class="player-avatar">
                    <i class="fa fa-user"></i>
                </div>
                <div class="player-info">
                    <span class="player-name">编程学徒</span>
                    <span class="player-level">LV.1</span>
                </div>
                <div class="stat-item">
                    <i class="fa fa-trophy"></i>
                    <span>0/29</span>
                </div>
                <div class="stat-item">
                    <i class="fa fa-shield"></i>
                    <span>100</span>
                </div>
                <div class="stat-item">
                    <div class="exp-bar">
                        <div class="exp-fill"></div>
                    </div>
                    <div class="exp-text">10/100</div>
                </div>
            </div>
        </div>
    </header>

    <main>
        <section class="guide-card">
            <div class="guide-header">
                <div class="guide-icon">
                    <i class="fa fa-lightbulb-o"></i>
                </div>
                <h2 class="guide-title">冒险指南</h2>
            </div>
            <ul class="guide-list">
                <li class="guide-item">
                    <i class="fa fa-check-circle"></i>
                    <span>击败30只编程怪兽，掌握从基础到框架的全栈技能，每只怪兽对应一个核心知识点</span>
                </li>
                <li class="guide-item">
                    <i class="fa fa-check-circle"></i>
                    <span>攻击怪兽弱点可造成暴击伤害，弱点提示会闪烁显示</span>
                </li>
                <li class="guide-item">
                    <i class="fa fa-check-circle"></i>
                    <span>通关后获得徽章，集齐同类徽章可解锁专属技能树</span>
                </li>
                <li class="guide-item">
                    <i class="fa fa-check-circle"></i>
                    <span>建议按HTML→CSS→JS→Java Web→框架的顺序挑战，构建完整知识体系</span>
                </li>
            </ul>
        </section>
        
        <section class="levels-container">
            <div class="levels-header">
                <h2 class="levels-title">编程怪兽挑战</h2>
                <p class="levels-subtitle">30只编程怪兽等你来征服，每只怪兽守护着一个Java Web核心技能</p>
            </div>
            
            <div class="scroll-indicator" id="scrollIndicator">
                <div class="scroll-dot active" data-index="0"></div>
                <div class="scroll-dot" data-index="1"></div>
                <div class="scroll-dot" data-index="2"></div>
                <div class="scroll-dot" data-index="3"></div>
                <div class="scroll-dot" data-index="4"></div>
                <div class="scroll-dot" data-index="5"></div>
            </div>
            
            <div class="cards-scroll" id="cardsScroll">
                <!-- 关卡0：指南守护者 -->
                <div class="level-card level-0" data-level="0">
                    <div class="completed-badge"><i class="fa fa-check"></i></div>
                    <div class="particle-container"></div>
                    <div class="skill-aura"></div>
                    <div class="monster-level">LV.0</div>
                    <div class="card-inner">
                        <div class="monster-avatar avatar-guide">
                            <i class="fa fa-book"></i>
                        </div>
                        <h3 class="monster-name">指南守护者</h3>
                        <p class="monster-description">
                            守护着游戏规则的古老存在，了解它的习性才能开始编程冒险
                        </p>
                        <div class="weakness-hint">
                            <i class="fa fa-info-circle"></i>
                            <span>弱点：通读指南</span>
                        </div>
                        <button class="card-button">
                            <i class="fa fa-book"></i>
                            开始挑战
                        </button>
                    </div>
                </div>
                
                <!-- 关卡1：标签怪 -->
                <div class="level-card level-1" data-level="1">
                    <div class="particle-container"></div>
                    <div class="skill-aura"></div>
                    <div class="monster-level">LV.1</div>
                    <div class="card-inner">
                        <div class="monster-avatar avatar-tag">
                            <i class="fa fa-html5"></i>
                        </div>
                        <h3 class="monster-name">标签怪</h3>
                        <p class="monster-description">
                            由各种HTML标签组成的怪兽，擅长用不闭合的标签制造混乱
                        </p>
                        <div class="weakness-hint">
                            <i class="fa fa-bolt"></i>
                            <span>弱点：正确闭合标签</span>
                        </div>
                        <button class="card-button">
                            <i class="fa fa-play"></i>
                            开始挑战
                        </button>
                    </div>
                </div>
                
                <!-- 关卡2：网格巨兽 -->
                <div class="level-card level-2" data-level="2">
                    <div class="particle-container"></div>
                    <div class="skill-aura"></div>
                    <div class="monster-level">LV.2</div>
                    <div class="card-inner">
                        <div class="monster-avatar avatar-grid">
                            <i class="fa fa-table"></i>
                        </div>
                        <h3 class="monster-name">网格巨兽</h3>
                        <p class="monster-description">
                            身体由无数单元格组成，能通过合并单元格改变形态
                        </p>
                        <div class="weakness-hint">
                            <i class="fa fa-bolt"></i>
                            <span>弱点：colspan/rowspan</span>
                        </div>
                        <button class="card-button">
                            <i class="fa fa-play"></i>
                            开始挑战
                        </button>
                    </div>
                </div>
                
                <!-- 关卡3：数据收集者 -->
                <div class="level-card level-3" data-level="3">
                    <div class="particle-container"></div>
                    <div class="skill-aura"></div>
                    <div class="monster-level">LV.3</div>
                    <div class="card-inner">
                        <div class="monster-avatar avatar-form">
                            <i class="fa fa-wpforms"></i>
                        </div>
                        <h3 class="monster-name">数据收集者</h3>
                        <p class="monster-description">
                            能吸收用户输入的数据，没有name属性就会失去力量
                        </p>
                        <div class="weakness-hint">
                            <i class="fa fa-bolt"></i>
                            <span>弱点：正确设置name</span>
                        </div>
                        <button class="card-button">
                            <i class="fa fa-play"></i>
                            开始挑战
                        </button>
                    </div>
                </div>
                
                <!-- 关卡4：样式猎手 -->
                <div class="level-card level-4" data-level="4">
                    <div class="particle-container"></div>
                    <div class="skill-aura"></div>
                    <div class="monster-level">LV.4</div>
                    <div class="card-inner">
                        <div class="monster-avatar avatar-css">
                            <i class="fa fa-css3"></i>
                        </div>
                        <h3 class="monster-name">样式猎手</h3>
                        <p class="monster-description">
                            能精准定位任何元素，但其优先级计算方式存在致命缺陷
                        </p>
                        <div class="weakness-hint">
                            <i class="fa fa-bolt"></i>
                            <span>弱点：优先级计算</span>
                        </div>
                        <button class="card-button">
                            <i class="fa fa-play"></i>
                            开始挑战
                        </button>
                    </div>
                </div>
                
                <!-- 关卡5：布局大师 -->
                <div class="level-card level-5" data-level="5">
                    <div class="particle-container"></div>
                    <div class="skill-aura"></div>
                    <div class="monster-level">LV.5</div>
                    <div class="card-inner">
                        <div class="monster-avatar avatar-layout">
                            <i class="fa fa-paint-brush"></i>
                        </div>
                        <h3 class="monster-name">布局大师</h3>
                        <p class="monster-description">
                            擅长用浮动制造混乱布局，但害怕清除浮动的咒语
                        </p>
                        <div class="weakness-hint">
                            <i class="fa fa-bolt"></i>
                            <span>弱点：清除浮动</span>
                        </div>
                        <button class="card-button">
                            <i class="fa fa-play"></i>
                            开始挑战
                        </button>
                    </div>
                </div>
                
                <!-- 关卡6：脚本小鬼 -->
                <div class="level-card level-6" data-level="6">
                    <div class="particle-container"></div>
                    <div class="skill-aura"></div>
                    <div class="monster-level">LV.6</div>
                    <div class="card-inner">
                        <div class="monster-avatar avatar-script">
                            <i class="fa fa-code"></i>
                        </div>
                        <h3 class="monster-name">脚本小鬼</h3>
                        <p class="monster-description">
                            由JavaScript代码构成，能操控页面元素，害怕getElementById
                        </p>
                        <div class="weakness-hint">
                            <i class="fa fa-bolt"></i>
                            <span>弱点：getElementById</span>
                        </div>
                        <button class="card-button">
                            <i class="fa fa-play"></i>
                            开始挑战
                        </button>
                    </div>
                </div>
                
                <!-- 关卡7：函数齿轮怪 -->
                <div class="level-card level-7" data-level="7">
                    <div class="particle-container"></div>
                    <div class="skill-aura"></div>
                    <div class="monster-level">LV.7</div>
                    <div class="card-inner">
                        <div class="monster-avatar avatar-function">
                            <i class="fa fa-cogs"></i>
                        </div>
                        <h3 class="monster-name">函数齿轮怪</h3>
                        <p class="monster-description">
                            体内有无数齿轮（函数）运转，参数传递错误会导致其停摆
                        </p>
                        <div class="weakness-hint">
                            <i class="fa fa-bolt"></i>
                            <span>弱点：正确传递参数</span>
                        </div>
                        <button class="card-button">
                            <i class="fa fa-play"></i>
                            开始挑战
                        </button>
                    </div>
                </div>
                
                <!-- 关卡8：事件幽灵 -->
                <div class="level-card level-8" data-level="8">
                    <div class="particle-container"></div>
                    <div class="skill-aura"></div>
                    <div class="monster-level">LV.8</div>
                    <div class="card-inner">
                        <div class="monster-avatar avatar-event">
                            <i class="fa fa-object-group"></i>
                        </div>
                        <h3 class="monster-name">事件幽灵</h3>
                        <p class="monster-description">
                            能触发各种页面事件，只有addEventListener能捕捉它
                        </p>
                        <div class="weakness-hint">
                            <i class="fa fa-bolt"></i>
                            <span>弱点：addEventListener</span>
                        </div>
                        <button class="card-button">
                            <i class="fa fa-play"></i>
                            开始挑战
                        </button>
                    </div>
                </div>
                
                <!-- 关卡9：JQ魔术师 -->
                <div class="level-card level-9" data-level="9">
                    <div class="particle-container"></div>
                    <div class="skill-aura"></div>
                    <div class="monster-level">LV.9</div>
                    <div class="card-inner">
                        <div class="monster-avatar avatar-jquery">
                            <i class="fa fa-jquery"></i>
                        </div>
                        <h3 class="monster-name">JQ魔术师</h3>
                        <p class="monster-description">
                            擅长用简洁代码实现复杂效果，但其AJAX魔法有破绽
                        </p>
                        <div class="weakness-hint">
                            <i class="fa fa-bolt"></i>
                            <span>弱点：$.ajax</span>
                        </div>
                        <button class="card-button">
                            <i class="fa fa-play"></i>
                            开始挑战
                        </button>
                    </div>
                </div>
                
                <!-- 关卡10：动态页面兽 -->
                <div class="level-card level-10" data-level="10">
                    <div class="particle-container"></div>
                    <div class="skill-aura"></div>
                    <div class="monster-level">LV.10</div>
                    <div class="card-inner">
                        <div class="monster-avatar avatar-jsp">
                            <i class="fa fa-file-code-o"></i>
                        </div>
                        <h3 class="monster-name">动态页面兽</h3>
                        <p class="monster-description">
                            能在服务器端生成动态内容，被<%= %>表达式击中会暴露数据
                        </p>
                        <div class="weakness-hint">
                            <i class="fa fa-bolt"></i>
                            <span>弱点：<%= %>表达式</span>
                        </div>
                        <button class="card-button">
                            <i class="fa fa-play"></i>
                            开始挑战
                        </button>
                    </div>
                </div>
                
                <!-- 关卡11：数据交换兽 -->
                <div class="level-card level-11" data-level="11">
                    <div class="particle-container"></div>
                    <div class="skill-aura"></div>
                    <div class="monster-level">LV.11</div>
                    <div class="card-inner">
                        <div class="monster-avatar avatar-exchange">
                            <i class="fa fa-exchange"></i>
                        </div>
                        <h3 class="monster-name">数据交换兽</h3>
                        <p class="monster-description">
                            掌控客户端与服务器的数据交换，害怕getParameter方法
                        </p>
                        <div class="weakness-hint">
                            <i class="fa fa-bolt"></i>
                            <span>弱点：request.getParameter</span>
                        </div>
                        <button class="card-button">
                            <i class="fa fa-play"></i>
                            开始挑战
                        </button>
                    </div>
                </div>
                
                <!-- 关卡12：会话魅影 -->
                <div class="level-card level-12" data-level="12">
                    <div class="particle-container"></div>
                    <div class="skill-aura"></div>
                    <div class="monster-level">LV.12</div>
                    <div class="card-inner">
                        <div class="monster-avatar avatar-session">
                            <i class="fa fa-user-secret"></i>
                        </div>
                        <h3 class="monster-name">会话魅影</h3>
                        <p class="monster-description">
                            能记住用户状态，但其属性存储机制是致命弱点
                        </p>
                        <div class="weakness-hint">
                            <i class="fa fa-bolt"></i>
                            <span>弱点：setAttribute</span>
                        </div>
                        <button class="card-button">
                            <i class="fa fa-play"></i>
                            开始挑战
                        </button>
                    </div>
                </div>
                
                <!-- 关卡13：服务守卫 -->
                <div class="level-card level-13" data-level="13">
                    <div class="particle-container"></div>
                    <div class="skill-aura"></div>
                    <div class="monster-level">LV.13</div>
                    <div class="card-inner">
                        <div class="monster-avatar avatar-servlet">
                            <i class="fa fa-server"></i>
                        </div>
                        <h3 class="monster-name">服务守卫</h3>
                        <p class="monster-description">
                            守护服务器的强大存在，其doGet/doPost方法有防御漏洞
                        </p>
                        <div class="weakness-hint">
                            <i class="fa fa-bolt"></i>
                            <span>弱点：doGet/doPost</span>
                        </div>
                        <button class="card-button">
                            <i class="fa fa-play"></i>
                            开始挑战
                        </button>
                    </div>
                </div>
                
                <!-- 关卡14：过滤屏障 -->
                <div class="level-card level-14" data-level="14">
                    <div class="particle-container"></div>
                    <div class="skill-aura"></div>
                    <div class="monster-level">LV.14</div>
                    <div class="card-inner">
                        <div class="monster-avatar avatar-filter">
                            <i class="fa fa-filter"></i>
                        </div>
                        <h3 class="monster-name">过滤屏障</h3>
                        <p class="monster-description">
                            能拦截所有请求，但其过滤链传递机制存在弱点
                        </p>
                        <div class="weakness-hint">
                            <i class="fa fa-bolt"></i>
                            <span>弱点：doFilter</span>
                        </div>
                        <button class="card-button">
                            <i class="fa fa-play"></i>
                            开始挑战
                        </button>
                    </div>
                </div>
                
                <!-- 关卡15：框架构造者 -->
                <div class="level-card level-15" data-level="15">
                    <div class="particle-container"></div>
                    <div class="skill-aura"></div>
                    <div class="monster-level">LV.15</div>
                    <div class="card-inner">
                        <div class="monster-avatar avatar-springmvc">
                            <i class="fa fa-cubes"></i>
                        </div>
                        <h3 class="monster-name">框架构造者</h3>
                        <p class="monster-description">
                            由无数配置文件构成，web.xml配置错误会使其崩溃
                        </p>
                        <div class="weakness-hint">
                            <i class="fa fa-bolt"></i>
                            <span>弱点：web.xml配置</span>
                        </div>
                        <button class="card-button">
                            <i class="fa fa-play"></i>
                            开始挑战
                        </button>
                    </div>
                </div>
                
                <!-- 关卡16：路径迷宫兽 -->
                <div class="level-card level-16" data-level="16">
                    <div class="particle-container"></div>
                    <div class="skill-aura"></div>
                    <div class="monster-level">LV.16</div>
                    <div class="card-inner">
                        <div class="monster-avatar avatar-mapping">
                            <i class="fa fa-map-signs"></i>
                        </div>
                        <h3 class="monster-name">路径迷宫兽</h3>
                        <p class="monster-description">
                            能创建复杂的URL迷宫，但其请求方法限定存在弱点
                        </p>
                        <div class="weakness-hint">
                            <i class="fa fa-bolt"></i>
                            <span>弱点：method属性</span>
                        </div>
                        <button class="card-button">
                            <i class="fa fa-play"></i>
                            开始挑战
                        </button>
                    </div>
                </div>
                
                <!-- 关卡17：数据连接器 -->
                <div class="level-card level-17" data-level="17">
                    <div class="particle-container"></div>
                    <div class="skill-aura"></div>
                    <div class="monster-level">LV.17</div>
                    <div class="card-inner">
                        <div class="monster-avatar avatar-param1">
                            <i class="fa fa-plug"></i>
                        </div>
                        <h3 class="monster-name">数据连接器</h3>
                        <p class="monster-description">
                            能将请求数据绑定到对象，POJO绑定错误会使其失效
                        </p>
                        <div class="weakness-hint">
                            <i class="fa fa-bolt"></i>
                            <span>弱点：POJO绑定</span>
                        </div>
                        <button class="card-button">
                            <i class="fa fa-play"></i>
                            开始挑战
                        </button>
                    </div>
                </div>
                
                <!-- 关卡18：集合绑定兽 -->
                <div class="level-card level-18" data-level="18">
                    <div class="particle-container"></div>
                    <div class="skill-aura"></div>
                    <div class="monster-level">LV.18</div>
                    <div class="card-inner">
                        <div class="monster-avatar avatar-param2">
                            <i class="fa fa-plug"></i>
                        </div>
                        <h3 class="monster-name">集合绑定兽</h3>
                        <p class="monster-description">
                            擅长处理数组和集合数据，自定义转换器是它的克星
                        </p>
                        <div class="weakness-hint">
                            <i class="fa fa-bolt"></i>
                            <span>弱点：Converter</span>
                        </div>
                        <button class="card-button">
                            <i class="fa fa-play"></i>
                            开始挑战
                        </button>
                    </div>
                </div>
                
                <!-- 关卡19：权限守卫 -->
                <div class="level-card level-19" data-level="19">
                    <div class="particle-container"></div>
                    <div class="skill-aura"></div>
                    <div class="monster-level">LV.19</div>
                    <div class="card-inner">
                        <div class="monster-avatar avatar-interceptor">
                            <i class="fa fa-shield"></i>
                        </div>
                        <h3 class="monster-name">权限守卫</h3>
                        <p class="monster-description">
                            守护着系统安全，preHandle方法是其防御突破口
                        </p>
                        <div class="weakness-hint">
                            <i class="fa fa-bolt"></i>
                            <span>弱点：preHandle</span>
                        </div>
                        <button class="card-button">
                            <i class="fa fa-play"></i>
                            开始挑战
                        </button>
                    </div>
                </div>
                
                <!-- 关卡20：数据搜寻者 -->
                <div class="level-card level-20" data-level="20">
                    <div class="particle-container"></div>
                    <div class="skill-aura"></div>
                    <div class="monster-level">LV.20</div>
                    <div class="card-inner">
                        <div class="monster-avatar avatar-db-query">
                            <i class="fa fa-database"></i>
                        </div>
                        <h3 class="monster-name">数据搜寻者</h3>
                        <p class="monster-description">
                            能从数据库中提取信息，ResultSet处理错误会使其混乱
                        </p>
                        <div class="weakness-hint">
                            <i class="fa fa-bolt"></i>
                            <span>弱点：ResultSet处理</span>
                        </div>
                        <button class="card-button">
                            <i class="fa fa-play"></i>
                            开始挑战
                        </button>
                    </div>
                </div>
                
                <!-- 关卡21：数据改写者 -->
                <div class="level-card level-21" data-level="21">
                    <div class="particle-container"></div>
                    <div class="skill-aura"></div>
                    <div class="monster-level">LV.21</div>
                    <div class="card-inner">
                        <div class="monster-avatar avatar-db-update">
                            <i class="fa fa-pencil"></i>
                        </div>
                        <h3 class="monster-name">数据改写者</h3>
                        <p class="monster-description">
                            能修改数据库记录，事务提交机制是其弱点
                        </p>
                        <div class="weakness-hint">
                            <i class="fa fa-bolt"></i>
                            <span>弱点：事务提交</span>
                        </div>
                        <button class="card-button">
                            <i class="fa fa-play"></i>
                            开始挑战
                        </button>
                    </div>
                </div>
                
                <!-- 关卡22：数据增生者 -->
                <div class="level-card level-22" data-level="22">
                    <div class="particle-container"></div>
                    <div class="skill-aura"></div>
                    <div class="monster-level">LV.22</div>
                    <div class="card-inner">
                        <div class="monster-avatar avatar-db-insert">
                            <i class="fa fa-plus-circle"></i>
                        </div>
                        <h3 class="monster-name">数据增生者</h3>
                        <p class="monster-description">
                            能不断创建新数据，获取自增主键的方法能削弱它
                        </p>
                        <div class="weakness-hint">
                            <i class="fa fa-bolt"></i>
                            <span>弱点：getGeneratedKeys</span>
                        </div>
                        <button class="card-button">
                            <i class="fa fa-play"></i>
                            开始挑战
                        </button>
                    </div>
                </div>
                
                <!-- 关卡23：数据吞噬者 -->
                <div class="level-card level-23" data-level="23">
                    <div class="particle-container"></div>
                    <div class="skill-aura"></div>
                    <div class="monster-level">LV.23</div>
                    <div class="card-inner">
                        <div class="monster-avatar avatar-db-delete">
                            <i class="fa fa-trash"></i>
                        </div>
                        <h3 class="monster-name">数据吞噬者</h3>
                        <p class="monster-description">
                            能删除数据库记录，事务回滚是对抗它的有效手段
                        </p>
                        <div class="weakness-hint">
                            <i class="fa fa-bolt"></i>
                            <span>弱点：事务回滚</span>
                        </div>
                        <button class="card-button">
                            <i class="fa fa-play"></i>
                            开始挑战
                        </button>
                    </div>
                </div>
                
                <!-- 关卡24：映射搜寻者 -->
                <div class="level-card level-24" data-level="24">
                    <div class="particle-container"></div>
                    <div class="skill-aura"></div>
                    <div class="monster-level">LV.24</div>
                    <div class="card-inner">
                        <div class="monster-avatar avatar-mybatis-query">
                            <i class="fa fa-search"></i>
                        </div>
                        <h3 class="monster-name">映射搜寻者</h3>
                        <p class="monster-description">
                            能通过映射文件查询数据，select标签配置是其弱点
                        </p>
                        <div class="weakness-hint">
                            <i class="fa fa-bolt"></i>
                            <span>弱点：select标签</span>
                        </div>
                        <button class="card-button">
                            <i class="fa fa-play"></i>
                            开始挑战
                        </button>
                    </div>
                </div>
                
                <!-- 关卡25：SQL变形者 -->
                <div class="level-card level-25" data-level="25">
                    <div class="particle-container"></div>
                    <div class="skill-aura"></div>
                    <div class="monster-level">LV.25</div>
                    <div class="card-inner">
                        <div class="monster-avatar avatar-mybatis-sql">
                            <i class="fa fa-code-fork"></i>
                        </div>
                        <h3 class="monster-name">SQL变形者</h3>
                        <p class="monster-description">
                            能根据条件改变SQL形态，foreach标签是控制它的关键
                        </p>
                        <div class="weakness-hint">
                            <i class="fa fa-bolt"></i>
                            <span>弱点：foreach</span>
                        </div>
                        <button class="card-button">
                            <i class="fa fa-play"></i>
                            开始挑战
                        </button>
                    </div>
                </div>
                
                <!-- 关卡26：容器巨兽 -->
                <div class="level-card level-26" data-level="26">
                    <div class="particle-container"></div>
                    <div class="skill-aura"></div>
                    <div class="monster-level">LV.26</div>
                    <div class="card-inner">
                        <div class="monster-avatar avatar-spring-ioc">
                            <i class="fa fa-cube"></i>
                        </div>
                        <h3 class="monster-name">容器巨兽</h3>
                        <p class="monster-description">
                            能管理所有对象，@Autowired注解能破解其依赖注入
                        </p>
                        <div class="weakness-hint">
                            <i class="fa fa-bolt"></i>
                            <span>弱点：@Autowired</span>
                        </div>
                        <button class="card-button">
                            <i class="fa fa-play"></i>
                            开始挑战
                        </button>
                    </div>
                </div>
                
                <!-- 关卡27：切面幻影 -->
                <div class="level-card level-27" data-level="27">
                    <div class="particle-container"></div>
                    <div class="skill-aura"></div>
                    <div class="monster-level">LV.27</div>
                    <div class="card-inner">
                        <div class="monster-avatar avatar-spring-aop">
                            <i class="fa fa-random"></i>
                        </div>
                        <h3 class="monster-name">切面幻影</h3>
                        <p class="monster-description">
                            能在方法执行前后隐身攻击，@Before注解能提前发现它
                        </p>
                        <div class="weakness-hint">
                            <i class="fa fa-bolt"></i>
                            <span>弱点：@Before</span>
                        </div>
                        <button class="card-button">
                            <i class="fa fa-play"></i>
                            开始挑战
                        </button>
                    </div>
                </div>
                
                <!-- 关卡28：事务守护者 -->
                <div class="level-card level-28" data-level="28">
                    <div class="particle-container"></div>
                    <div class="skill-aura"></div>
                    <div class="monster-level">LV.28</div>
                    <div class="card-inner">
                        <div class="monster-avatar avatar-spring-tx">
                            <i class="fa fa-exchange"></i>
                        </div>
                        <h3 class="monster-name">事务守护者</h3>
                        <p class="monster-description">
                            维护数据一致性，传播行为配置错误会使其失效
                        </p>
                        <div class="weakness-hint">
                            <i class="fa fa-bolt"></i>
                            <span>弱点：propagation</span>
                        </div>
                        <button class="card-button">
                            <i class="fa fa-play"></i>
                            开始挑战
                        </button>
                    </div>
                </div>
                
                <!-- 关卡29：框架合体兽 -->
                <div class="level-card level-29" data-level="29">
                    <div class="particle-container"></div>
                    <div class="skill-aura"></div>
                    <div class="monster-level">LV.29</div>
                    <div class="card-inner">
                        <div class="monster-avatar avatar-ssm">
                            <i class="fa fa-cubes"></i>
                        </div>
                        <h3 class="monster-name">框架合体兽</h3>
                        <p class="monster-description">
                            三大框架合体的终极怪兽，正确的配置文件是击败它的关键
                        </p>
                        <div class="weakness-hint">
                            <i class="fa fa-bolt"></i>
                            <span>弱点：配置文件</span>
                        </div>
                        <button class="card-button">
                            <i class="fa fa-play"></i>
                            开始挑战
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="scroll-hint">
                <i class="fa fa-hand-o-right"></i>
                <span>横向滑动查看更多怪兽（共30只，按技能类别分组）</span>
            </div>
        </section>
    </main>

    <script>
        // 粒子特效生成函数
        function createParticles(container, count, color, minSize, maxSize, duration) {
            container.innerHTML = '';
            
            for (let i = 0; i < count; i++) {
                const particle = document.createElement('div');
                particle.classList.add('particle');
                
                const size = Math.random() * (maxSize - minSize) + minSize;
                const startPosX = Math.random() * 100;
                const startPosY = Math.random() * 100;
                const endPosX = startPosX + (Math.random() * 40 - 20);
                const endPosY = startPosY + (Math.random() * 40 - 20);
                
                particle.style.width = `${size}px`;
                particle.style.height = `${size}px`;
                particle.style.backgroundColor = color;
                particle.style.left = `${startPosX}%`;
                particle.style.top = `${startPosY}%`;
                
                container.appendChild(particle);
                
                setTimeout(() => {
                    particle.style.transition = `all ${(Math.random() * 2 + 1) * duration}s ease-in-out`;
                    particle.style.transform = `translate(${endPosX - startPosX}%, ${endPosY - startPosY}%)`;
                    particle.style.opacity = '0.6';
                    
                    setTimeout(() => {
                        particle.style.transition = 'none';
                        particle.style.transform = 'translate(0, 0)';
                        particle.style.opacity = '0';
                        setTimeout(() => particle.remove(), 100);
                    }, (Math.random() * 2 + 1) * duration * 1000);
                }, 100 * i);
            }
        }
        
        // 技能光环动画
        function animateAura(aura, color) {
            aura.style.width = '0px';
            aura.style.height = '0px';
            aura.style.borderColor = color;
            aura.style.opacity = '1';
            
            setTimeout(() => {
                aura.style.transition = 'all 2s ease-out';
                aura.style.width = '200px';
                aura.style.height = '200px';
                aura.style.opacity = '0';
            }, 100);
            
            setTimeout(() => {
                aura.style.transition = 'none';
                aura.style.width = '0px';
                aura.style.height = '0px';
            }, 2100);
        }
        
        // 爆炸效果
        function createExplosion(container, x, y) {
            const explosion = document.createElement('div');
            explosion.classList.add('explosion-container');
            container.appendChild(explosion);
            
            for (let i = 0; i < 30; i++) {
                const particle = document.createElement('div');
                particle.classList.add('explosion-particle');
                
                const size = Math.random() * 6 + 2;
                const angle = Math.random() * Math.PI * 2;
                const distance = Math.random() * 80 + 40;
                const endX = Math.cos(angle) * distance;
                const endY = Math.sin(angle) * distance;
                
                particle.style.width = `${size}px`;
                particle.style.height = `${size}px`;
                particle.style.left = `${x}px`;
                particle.style.top = `${y}px`;
                
                explosion.appendChild(particle);
                
                setTimeout(() => {
                    particle.style.transition = `all 0.6s ease-out`;
                    particle.style.transform = `translate(${endX}px, ${endY}px)`;
                    particle.style.opacity = '1';
                }, 50);
            }
            
            setTimeout(() => explosion.remove(), 1000);
        }
        
        // 初始化每个卡片的特效
        document.querySelectorAll('.level-card').forEach((card, index) => {
            const particleContainer = card.querySelector('.particle-container');
            const aura = card.querySelector('.skill-aura');
            const button = card.querySelector('.card-button');
            
            // 提取卡片颜色
            const computedStyle = window.getComputedStyle(card);
            const bgColor = computedStyle.background;
            const colorMatch = bgColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
            const particleColor = colorMatch ? `rgba(${colorMatch[1]}, ${colorMatch[2]}, ${colorMatch[3]}, 0.6)` : 'rgba(255,255,255,0.6)';
            
            // 定时生成粒子
            setInterval(() => {
                createParticles(particleContainer, 8, particleColor, 3, 8, 1);
            }, 3000);
            
            // 初始生成粒子
            setTimeout(() => {
                createParticles(particleContainer, 8, particleColor, 3, 8, 1);
            }, 500 * index);
            
            // 鼠标悬停时触发技能光环
            card.addEventListener('mouseenter', () => {
                animateAura(aura, `rgba(255,255,255,0.8)`);
            });
            
            // 点击按钮时触发爆炸效果
            button.addEventListener('click', (e) => {
                e.stopPropagation();
                const rect = card.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;
                
                createExplosion(card, x, y);
                
                button.style.transform = 'scale(0.95)';
                setTimeout(() => {
                    button.style.transform = 'scale(1)';
                    const level = card.getAttribute('data-level');
                    const monsterName = card.querySelector('.monster-name').textContent;
                    alert(`你正在挑战 LV.${level} ${monsterName}！准备好运用你的编程技能了吗？`);
                    
                    // 标记为已完成（仅演示）
                    if (level === '0') {
                        card.classList.add('completed');
                    }
                }, 150);
            });
        });
        
        // 滚动指示器与卡片联动
        const cardsScroll = document.getElementById('cardsScroll');
        const scrollDots = document.querySelectorAll('.scroll-dot');
        
        cardsScroll.addEventListener('scroll', () => {
            const scrollRatio = cardsScroll.scrollLeft / (cardsScroll.scrollWidth - cardsScroll.clientWidth);
            const activeDotIndex = Math.min(Math.floor(scrollRatio * scrollDots.length), scrollDots.length - 1);
            
            scrollDots.forEach((dot, index) => {
                dot.classList.toggle('active', index === activeDotIndex);
            });
        });
        
        scrollDots.forEach((dot, index) => {
            dot.addEventListener('click', () => {
                const targetScroll = (index / (scrollDots.length - 1)) * (cardsScroll.scrollWidth - cardsScroll.clientWidth);
                cardsScroll.scrollTo({
                    left: targetScroll,
                    behavior: 'smooth'
                });
            });
        });
        
        // 经验条动画
        const expBar = document.querySelector('.exp-fill');
        setTimeout(() => {
            expBar.style.width = '10%';
        }, 1000);
    </script>
</body>
</html>